<template>
    <div class="home">
        <h1>ToDoList 点餐服务</h1>
        <h3>当前登录的用户是：{{ $store.state.userName }}</h3>
        <h2>菜单列表：</h2>
        <ul>
            <li v-for="(item, index) in allList" :key="index">
                {{ item.name }} 价格 {{ item.price }}
                <button @click="addCheckList(index)">点餐</button>
            </li>
        </ul>
        <h2>已点菜单：</h2>
        <ul>
            <li v-for="(item, index) in checkList" :key="index">
                {{ item.name }} 价格 {{ item.price }}
                <button @click="removeCheckList(index)">取消</button>
            </li>
        </ul>
        <h3>你一共点了 {{ checkListNum }} 道菜，消费 {{ allPay }} 元</h3>
    </div>
</template>

<script>
import { computed, defineComponent, reactive, toRefs, onMounted } from "vue";
import add from "../tools/add";
export default defineComponent({
    setup() {
        // 我们一般把相应的 数据状态 、计算属性、 事件行为 都统一封装在 reactive hook 中，以方便统一管理和阅读
        const data = reactive({
            allList: [
                {
                    name: "宫保鸡丁",
                    price: 18.88,
                },
                {
                    name: "鱼香茄子",
                    price: 8.88,
                },
                {
                    name: "宫保鸡丁",
                    price: 28.88,
                },
            ],
            checkList: [],
            checkListNum: computed(() => {
                return data.checkList.length;
            }),
            allPay: computed(() => {
                let allPay = 0;
                data.checkList.map((item) => {
                    allPay = add(allPay, item.price);
                });
                console.log(0.1 + 0.2);
                // 大家要注意哦，在 js 中，浮点数相加会与实际结果有差异，这是为什么呢？因为在 js 编译的过程中，浮点数保存并不是精确的
                return allPay;
            }),
            addCheckList: (index) => {
                console.log("你点的菜肴是：", data.allList[index]);
                data.checkList.push(data.allList[index]);
            },
            removeCheckList: (index) => {
                console.log("你取消了菜肴：", data.checkList[index]);
                data.checkList.splice(index, 1);
            },
        });
        onMounted(()=>{
            console.log("我是被挂载了");
        });
        return {
            ...toRefs(data),
        };
    },
});
</script>
<style lang="scss" scoped>
li {
    margin: 20px;
}
</style>